import { Divider, Button } from '@nextui-org/react'
import UserMemo from './UserMemo'
import BasicMenu from './BasicMenu'
import { ThemeSwitch } from '../theme-switch'
import NextIcon from '../NextIcon'
import clsx from 'clsx'
import { Dispatch, SetStateAction } from 'react'

type LeftMenuProps = {
  collapsed: boolean
  setCollapsed: Dispatch<SetStateAction<boolean>>
}

export default function LeftMenu({ collapsed, setCollapsed }: LeftMenuProps) {
  return (
    <div className="flex flex-col">
      <div
        className={clsx(
          collapsed ? 'justify-center' : 'justify-between',
          'h-[50px] items-center flex  px-4 my-2'
        )}
      >
        <UserMemo collapsed={collapsed} />
      </div>
      <Divider className="py-0" />
      <div
        className={clsx(
          'pt-2 px-2 overflow-y-auto',
          collapsed ? 'h-[calc(100vh-66px-154px)]' : 'h-[calc(100vh-66px-64px)]'
        )}
      >
        <BasicMenu collapsed={collapsed} />
      </div>
      {!collapsed && <Divider className="py-0" />}
      <div
        className={clsx(
          'px-2 flex items-center',
          collapsed
            ? 'h-[154px] justify-center space-y-4 flex-col pb-6'
            : 'h-16 justify-between'
        )}
      >
        <ThemeSwitch collapsed={collapsed} />

        <Button
          size="sm"
          radius="full"
          className="px-0 min-w-8"
          onClick={() => setCollapsed(pre => !pre)}
        >
          {collapsed ? (
            <NextIcon type="arrowright" size={16} />
          ) : (
            <NextIcon type="arrowleft" size={16} />
          )}
        </Button>
      </div>
    </div>
  )
}
